<script setup lang="ts">

</script>
    
<template>
    <div class="container1">
        <div class="bar">
            <svg>
                <defs>
                    <linearGradient id="circle1">
                        <stop stop-color="#baddf4" offset="0" />
                        <stop stop-color="lightSkyBlue" offset="1" />
                    </linearGradient>
                </defs>
                <circle cx="50%" cy="50%" r="50%" stroke-linecap="round"></circle>
            </svg>
            <img src="@/assets/imlogo.svg" alt="">
            <!-- <h1>HTML90%</h1> -->
        </div>
        <div class="bar">
            <svg>
                <circle cx="50%" cy="50%" r="50%" stroke-linecap="round"></circle>
            </svg>
            <img src="@/assets/sim.svg" alt="">

        </div>
        <div class="bar">
            <svg>
                <circle cx="50%" cy="50%" r="50%" stroke-linecap="round"></circle>
            </svg>
            <img src="@/assets/logo.svg" alt="">
            <!-- <h1>js<br />80%</h1> -->
        </div>
    </div>
</template>
    
<style scoped lang="scss">
// 200 30 630

.container1 {
    width: 100%;
    height: 100%;
    @include flex-column();
}

.bar {
    height: 160px;
    width: 160px;
    border-radius: 50%;
    position: relative;
    box-shadow: -3px -3px 7px #ffffffb2, 3px 3px 5px rgba(94, 104, 121, 0.945);
    overflow: hidden;
}

.bar:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 80%;
    width: 80%;
    border-radius: 50%;
    box-shadow: inset -3px -3px 7px #ffffffb0, inset 3px 3px 5px rgba(94, 104, 121, 0.692);
}

svg {
    width: 100%;
    height: 100%;
    position: relative;
}

svg circle {
    position: absolute;
    transform: scale(0.939);
    transform-origin: center;
    fill: none;
    stroke: #567e7a;
    stroke: url(#circle1);

    stroke-width: 24px;
    stroke-dasharray: 504px;
    /* stroke-dashoffset: 630px; */
}

.bar:nth-child(1) svg circle {
    animation: bar_1 1s ease forwards;
}

.bar:nth-child(2) svg circle {
    animation: bar_2 2s ease forwards;
}

.bar:nth-child(3) svg circle {
    animation: bar_3 3s ease forwards;
}

h1,
img {
    position: absolute;
    font-size: 15px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes bar_1 {
    0% {
        stroke-dashoffset: 504px;
    }

    100% {
        stroke-dashoffset: calc(504px - (504px * 90) / 100);
    }
}

@keyframes bar_2 {
    0% {
        stroke-dashoffset: 504px;
    }

    100% {
        stroke-dashoffset: calc(504px - (504px * 85) / 100);
    }
}

@keyframes bar_3 {
    0% {
        stroke-dashoffset: 504px;
    }

    100% {
        stroke-dashoffset: calc(504px - (504px * 80) / 100);
    }
}
</style>